<template>
  <div class="VideoCustomer">
    <el-tooltip
      class="item"
      effect="dark"
      :disabled="!imConfig.openVideoCallService"
      :content="ImSettingConfig.openVideoService === 0 ? $t('im.imChat.components.messageBox.videoCustomer.tips1') : $t('common.base.video')"
      placement="top"
    >
      <span
        :class="[
          'iconfont',
          'icon-video',
          'video-icon',
          disabled ? 'attachment2' : 'attachment',
          ImSettingConfig.openVideoService === 0 && 'not-allow',
        ]"
        v-track="$track.formatParams('VIDEO_CUSTOMER_SERVICE')"
        @click="VideoCustomer"
      >
        <div v-if="!isEmpty(imConfig) && !imConfig.openVideoCallService" class="bubble">
          <span class="text">HOT</span>
        </div>
      </span>
    </el-tooltip>

    <apply-modal :visible.sync="applyModalVisible" />
  </div>
</template>
<script>
import * as IMApi from '@src/api/ImApi.js';
import FileMixin from './FileMixin.js';
import ApplyModal from './ApplyModal.vue';
import { isEmpty } from 'pub-bbx-utils';

export default {
  components: {
    ApplyModal,
  },
  mixins: [FileMixin],
  inject: ['initData'],
  props: {
    conversationId: {
      type: [String, Number],
    },
    customerServiceNumber: {
      type: [String, Number],
    },
    hxIdObj: {
      typeof: Object,
      default: () => {},
    },
    imConfig: {
      typeof: Object,
      default: () => ({}),
    },
    disabled: Boolean,
    source: String,
    ImSettingConfig: {
      type: Object,
      default: () => {},
    },
  },
  data(){
    return {
      applyModalVisible: false,
    }
  },
  methods: {
    isEmpty,
    VideoCustomer() {
      // 未开通视频客服 打开申请弹框
      if (!this.imConfig.openVideoCallService){
        this.applyModalVisible = true
        return
      }
      if(this.ImSettingConfig.openVideoService === 0){
        // 开关没开
        return
      }
      this.$confirm(this.$t('im.imChat.components.messageBox.videoCustomer.tips2'), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.confirm'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      })
        .then(() => {
          this.createNewRoom();
        })
        .catch(() => {});
    },
    createNewRoom() {
      IMApi.createNewRoom({
        conversationId: this.conversationId,
        customerServiceNumber: this.customerServiceNumber,
      }).then(res => {
        const { code, data } = res;
        if (code === 0) {
          // 发送消息
          // 打开视频客服页面
          this.OpenVideo(data);
        } else if (res.code === 9000) {
          // 已有会话，关闭当前会话并且重开
          this.$confirm(res.message, this.$t('common.base.toast'), {
            confirmButtonText: this.$t('common.base.confirm'),
            cancelButtonText: this.$t('common.base.cancel'),
            type: 'warning',
          })
            .then(res => {
              IMApi.leaveRoom({
                conversationId: this.conversationId,
                roomNumber: data.roomNumber,
                userId: data.sponsorId,
                userType: 1,
                tenantId: data.tenantId,
              }).then(res => {
                if (res.code === 0) {
                  // 开启新会话
                  // this.createNewRoom();
                  this.$message(this.$t('im.imChat.components.messageBox.videoCustomer.tips3'));
                } else {
                  this.$message.error(res.message);
                }
              });
            })
            .catch(err => {
              // 开启之前会话
              // this.OpenVideo(data)
            });
        } else {
          // 其他情况
          this.$confirm(res.message, this.$t('common.base.toast'), {
            confirmButtonText: this.$t('common.base.confirm'),
            cancelButtonText: this.$t('common.base.cancel'),
            type: 'warning',
          });
        }
      });
    },
    OpenVideo(data) {
      let parames = {
        // 用户标识id
        userID: data.sponsorId,
        // 视频房间id XDnnGf89
        roomID: data.roomNumber,
        // 租户id
        tenantId: data.tenantId,
        // 客服会话id
        conversationId: this.conversationId,
        // 客服默认为1
        userType: 1,
        useStringRoomID: true,
      };
      this.$emit('SetMessage', parames);
    },
  },
};
</script>
<style scoped>
.attachment1 {
  color: #8c8c8c;
  cursor: not-allowed;
}
.attachment1:hover {
  color: #bfbfbf;
}
.attachment {
  color: #8c8c8c;
  cursor: pointer;
}
.attachment2 {
  color: #bfbfbf;
  cursor: pointer;
}

.not-allow {
  cursor: not-allowed;
}
.video-icon {
  position: relative;

  .bubble {
    position: absolute;
    top: 0;
    left: 0;
    /* right: -10px; */
    transform: translateY(-100%) scale(0.8);
    padding: 0 8px;
    background-color: #FF2727;
    line-height: 20px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;

    &::before {
      position: absolute;
      content: '';
      bottom: -10px;
      z-index: -1;
      left: 6px;
      width: 0;
      height: 0;
      border: 6px solid;
      border-color: #FF2727 transparent transparent transparent;
    }
  }

  .text {
    color: white;
    font-weight: bold;
    font-size: 12px;
  }
}
.attachment:hover {
  color: $color-primary;
}
.VideoCustomer {
  display: inline-block;
}
</style>
